<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  data: Object
});

const chart = ref(null);

const renderChart = () => {
  if (!chart.value) return;

  const myChart = echarts.init(chart.value);
  const option = {
    title: {
      text: '活动频率图'
    },
    xAxis: {
      type: 'category',
      data: Object.keys(props.data)
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: Object.values(props.data),
      type: 'line'
    }]
  };
  myChart.setOption(option);
};

onMounted(() => {
  renderChart();
});

watch(
    () => props.data,
    () => {
      renderChart();
    },
    { deep: true }
);
</script>

<template>
  <div>

    <div ref="chart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<style scoped>

</style>